import {
  createElement,
  render,
  renderDOM
} from './virtualDom';

import domDiff from './domDiff';

import doPatch from './doPatch';

const vDom1 = createElement('ul', {
  class: 'list',
  style: 'width: 300px; height: 300px; background-color: orange'
}, [
  createElement('li', {
    class: 'item',
    'data-index': 0
  }, [
    createElement('p', {
      class: 'text'
    }, [
      '第1个列表项'
    ])
  ]),
  createElement('li', {
    class: 'item',
    'data-index': 1
  }, [
    createElement('p', {
      class: 'text'
    }, [
      '第2个列表项'
    ])
  ]),
  createElement('li', {
    class: 'item',
    'data-index': 2
  }, [
    createElement('p', {
      class: 'text'
    }, [
      '第3个列表项'
    ])
  ]),
]);

const vDom2 = createElement('ul', {
  class: 'list-wrap',
  style: 'width: 300px; height: 300px; background-color: orange'
}, [
  createElement('li', {
    class: 'item',
    'data-index': 0
  }, [
    createElement('p', {
      class: 'title'
    }, [
      '特殊列表项'
    ])
  ]),
  createElement('li', {
    class: 'item',
    'data-index': 1
  }, [
    createElement('p', {
      class: 'text'
    }, [

    ])
  ]),
  createElement('div', {
    class: 'item',
    'data-index': 2
  }, [
    '第3个列表项'
  ]),
]);

// console.log(vDom1);
//Element {type: 'ul', props: {…}, children: Array(3)}

// console.log(vDom2);

//1.拿到真实节点
const rDom = render(vDom1);
// console.log(rDom);
// console.log(vDom);

//2.对比新老节点返回补丁包
const patches = domDiff(vDom1, vDom2);

// console.log(patches);

/**
 * console.log(patches);
 * {
 *   [
 *     {type: 'ATTR', attrs: {…}}
 *   ],
 *   [{…}],
 *   [{…}],
 *   [{…}],
 *   ...
 * }
 */



//3.渲染页面
renderDOM(rDom, document.getElementById('app'));

//4.给真实DOM打补丁
doPatch(rDom, patches);